<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="formInline.user" placeholder="用户名"></el-input>
            </el-form-item>

            <el-form-item label="电话">
                <el-input v-model="formInline.tel" placeholder="电话"></el-input>
            </el-form-item>


        <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="请选择状态">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="addUser">添加</el-button>
        </el-form-item>
        </el-form>


        <el-table
        ref="multipleTable"
        :data="listShow"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>

        <el-table-column
        prop="nickname"
        label="姓名"
        width="120">
        </el-table-column>

         <el-table-column
        prop="mobile"
        label="电话"
        width="120">
        </el-table-column>

        <el-table-column label='状态' width="120">
        <template slot-scope='scope'>
           <span> {{ scope.row.status === 1 ? "启用" : '禁用' }} </span>
        </template>
        </el-table-column>


        <el-table-column
        prop="created_at"
        label="添加时间"
        width="200">
        <template slot-scope='scope'>
           <span> {{ new Date(scope.row.created_at* 1000).toLocaleString() }} </span>
        </template>
        </el-table-column>


        

        <el-table-column
        prop="address"
        label="操作"
        show-overflow-tooltip>

        <template slot-scope='scope'>
           <el-button type="primary" @click="delClick(scope.$index)" >删除</el-button>
        </template>
        

        </el-table-column>
    </el-table>



<!-- 分页器 -->
<el-pagination
  background
  layout="prev, pager, next"
  :page-size='pageSize'
  :current-page='currentPage'
  @current-change='currentChange'
  :total="19">
</el-pagination>


    </div>
</template>

<script>
export default {
    name: 'dispose1',
    data() {
        return {
              formInline: {
                user: '',
                tel:'',
                mobile: ''
            },
            tableData:[],
            // 每页个数
            pageSize:5,
            // d当前页
            currentPage:1,
            // 深拷贝的数组，用来搜索
            listCopy:[],
            // 用来 显示的数组
            // listShow:[]
        
        };
    },
    created() {
        this.$axios({
            url:'/list.json',
            method:'get'
        }).then(res => {
            this.tableData = res.data
            console.log(this.tableData);

            this.listCopy = JSON.parse(JSON.stringify(res.data))
            console.log(this.listCopy);
            
        })
    },
    methods: {
        // 查询
        onSubmit() {
            // 如果数组里包含数据就赋值给显示的数组

            var arr = this.listCopy.filter(item => {
               return ( 
                   item.nickname.includes(this.formInline.user)  &&
                   item.mobile.includes(this.formInline.tel)
               )
            })
            this.tableData = arr
            // console.log();
            



        },
        // 添加用户
        addUser() {
            
        },
         toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    //   当前页面发送改变
      currentChange(i) {
          this.currentPage = i
      },

    //   删除
    delClick(index) {
        console.log(index);
        this.tableData.splice(index,1)
    }
    },
    watch:{
       
    },
    
    //组件挂载
    components: {},
    //计算属性
    computed: {
        listShow() {
        return  this.tableData.slice((this.currentPage - 1) * this.pageSize,(this.currentPage * this.pageSize))
        }
    },
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>

</style>
